<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>章节信息</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/custom.form.css">
    <style>
        .context {
            width: 800px;
            margin: auto;
            text-align: center;
        }

        .context .courseInformation {
            font-size: 28px;
            word-wrap: break-word;
            color: #222226;
            padding-top: 20px;
            font-weight: 600;
            margin: 0;
            word-break: break-all;
        }

        .context .courseInformation .courseTeacher {
            font-size: 14px;
            padding-left: 100px;
        }

        .context .chapterList {
            text-align: left;
            background-color: #fff;
            transition: all .2s linear;
            box-shadow: 0 1px 3px rgb(18 18 18 / 10%);
            border-radius: 2px;
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 20px;
            margin-top: 10px;
            width: 900px;
            height: 600px;
            overflow: scroll;
        }

        .chapterInformation {
            margin-top: 10px;
            padding-top: 20px;
            padding-right: 20px;
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            line-height: 30px;
            box-shadow: 0 3px 6px rgb(18 18 18 / 10%);
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="context">
    <div class="courseInformation">
        <div class="courseTitle">
            <h4 id="title"></h4>
        </div>
        <div class="courseTeacher">
            <span id="teacherName"></span>
        </div>
    </div>
    <div class="chapterList">
        <div>
            <button type="button" class="layui-btn addButton">添加</button>
        </div>
        <hr class="layui-border-green">
        <ul class="layui-timeline">

        </ul>
    </div>
</div>
</body>
<script src="/layui/layui.js"></script>
<script src="/js/core.util.js"></script>
<script src="/js/xm-select.js"></script>
<script>
    layui.use(['jquery', 'layer'], function () {
        const $ = layui.jquery;
        const layer = layui.layer;
        // 获取课程id
        const courseId = CoreUtil.getUrlParam("courseId");
        // 获取章节列表
        const loadCourseInfo = function () {
            CoreUtil.sendAjax(`/study/course/${courseId}`, null, function (res) {
                $("#title").text(res.name)
                $("#teacherName").text(res.teacherName)
            }, "GET", false, function (res) {
                console.log(res)
            });
        }
        loadCourseInfo();
        const loadList = function () {
            CoreUtil.sendAjax(`/study/chapter/${courseId}`, null, function (res) {
                res.map(data => {
                    const info = chapterInformationTemplateCreate(data);
                    $(".chapterList ul").append(info)
                    bindingFunction()
                })

            }, "GET", false, function (res) {
                console.log(res)
            });
        }

        // add Button
        $(".addButton").click(() => {
            let open = layer.open({
                title: "添加章节信息",
                type: 2,
                content: `/index/chapter/info?courseId=${courseId}`,
                cancel: function(){
                    loadList()
                }
            });
            layer.full(open);
        })

        const bindingFunction = function () {
            $(".modify").on("click", function (event) {
                let target = event.target;
                let chapterId = $(target).parent().parent().children("span").text();
                let open = layer.open({
                    title: "修改章节信息",
                    type: 2,
                    content: `/index/chapter/info?chapterId=${chapterId}&courseId=${courseId}`,
                    cancel: function(){
                        loadList()
                    }
                });
                layer.full(open);
            })
            $(".delete").on("click", function (event) {
                let target = event.target;
                let chapterId = $(target).parent().parent().children("span").text();
                CoreUtil.sendAjax("/study/chapter", JSON.stringify([chapterId]), function (res) {
                    layer.msg("删除成功！")
                    $(target).parent().parent().remove()
                }, 'DELETE')
            })
        }

        const chapterInformationTemplateCreate = (data) => {
            return `
             <li class="layui-timeline-item chapterInformation">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">${data.name}</div>
                </div>
                <span hidden="hidden">${data.id}</span>
                <div>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm modify">设置</button>
                    <button type="button" class="layui-btn layui-btn-danger layui-btn-sm delete">删除</button>
                </div>
            </li>
        `
        }
        loadList()
    })
</script>
</html>